<template>
    <el-tabs class="content-header" v-model="contentHeader" @tab-click="tabClick">
        <el-tab-pane label="地址列表" name="addressList">
          <v-searchTable :pageSize="10" :data="AddressList" border class="party_table" rowkey="UserAddressId" stripe :searchKeys="allSearchKeys">
              <el-table-column type="selection" width="30" align="center">
              </el-table-column>
              <el-table-column prop="consignee_name" label="收货人" width="80px" align="center">
              </el-table-column>
              <el-table-column prop="phone1" label="联系电话" width="150px" align="center">
              </el-table-column>
              <el-table-column prop="area" label="地址" align="left">
              </el-table-column>
              <el-table-column prop="is_default" :formatter="defaultFormat" width="80px" label="默认地址" align="center">
              </el-table-column>
              <el-table-column label="操作" align="center" width="250px">
                <template slot-scope="scope">
                  <el-button size="small" type="success" plain @click="showEdit(scope.row)">编辑</el-button>
                  <el-button size="small" type="danger" plain @click="deleteItem(scope.row)">删除</el-button>
                  <el-button size="small" type="primary" plain @click="setDefault(scope.row)">设置默认</el-button>
                </template>
              </el-table-column>
            </v-searchTable>
        </el-tab-pane>
        <el-tab-pane :label="addLable" name="addressAdd">
            <div  style="width: 800px; margin: 20px auto 0 auto;">
              <router-view />
            </div>
        </el-tab-pane>
      </el-tabs>
</template>
<script>
import SearchTable from './../../components/SearchTable'
import AddUserAddress from './AddUserAddress'
export default {
  data () {
    this.getListData()
    let addLable = this.setTab(this.$route.name, this.$route.query.id)
    return {
      AddressList: [ ],
      allSearchKeys: ['consignee_name'], // 列表的搜索
      isShowEdit: false,
      editDataId: 0,
      addLable: addLable
    }
  },
  components: {
    'v-searchTable': SearchTable,
    AddUserAddress
  },
  methods: {
    showList: function () {
      this.getListData()
      this.contentHeader = 'addressList'
    },
    getListData: function () {
      let self = this
      this.$axios.get('/api/Address/Gets').then(function (data) {
        self.AddressList = data
      })
    },
    showEdit: function (val) {
      this.addLable = this.setTab('addressEdit', val.user_address_id)
    },
    tabClick: function (val) {
      this.addLable = this.setTab(val.name, null)
    },
    setTab: function (name, param) {
      switch (name) {
        case 'addressList':
          this.contentHeader = 'addressList'
          this.$router.push('/user/address')
          return '新增'
        case 'addressAdd':
          this.contentHeader = 'addressAdd'
          this.$router.push('/user/address/add')
          return '新增'
        case 'addressEdit':
          this.contentHeader = 'addressAdd'
          this.$router.push('/user/address/edit?id=' + param)
          return '编辑'
        default:
          return null
      }
    },
    deleteItem: function (val) {
      const self = this
      this.$confirm(`将永久删除"${val.area}", 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete('/api/Address/Delete?id=' + val.user_address_id, {msg: '删除成功'}).then(function (data) {
          if (data.length !== 0) {
            self.$router.go(0)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    setDefault: function (val) {
      const self = this
      this.$confirm(`将"${val.area}"设置为默认地址, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info '
      }).then(() => {
        this.$axios.put('/api/Address/EditDefault?id=' + val.user_address_id, {}, {msg: '设置成功'}).then(function (data) {
          if (data.length !== 0) {
            self.$router.go(0)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消设置'
        })
      })
    },
    defaultFormat: function (row, column) {
      if (row.is_default) {
        return '是'
      } else {
        return '否'
      }
    }
  }
}
</script>
